/**
 * 品牌列表
 */
import React, { Component} from 'react'
import { Table ,Input,Image} from 'antd';
import './brand.css'
import storage from '../../Utils/storage'
import $http from '../../Utils/request'

//创建请求头文件
let config = {}
if(storage.get("token") !== null){
  config = {
    headers:
      {'Content-Type': 'application/json',
        'token':storage.get("token").data
      }
  }
}else{
  config = {
    headers:
      {'Content-Type': 'application/json'
      }
  }
}

const { Search } = Input;

export default class BrandTable extends Component {
  state ={
    dataSource : [],
    brandData:[], // 用于存放基础数据
    columns:[
      {
        title: '编号',
        dataIndex: 'brandId',
        align:'center',
        key: 'brandId',
        width:'50px'
      },{
        title: '品牌名称',
        dataIndex: 'brandName',
        align:'center',
        width:'120px'
      },{
        title: '图片路径',
        dataIndex: 'brandBigImageUrl',
        align:'center',
        width:'230px'
      },{
        title: '图片',
        dataIndex: 'brandBigImageUrl',
        align:'center',
        width:'100px',
        render:function (text){
          if( text!== null){
            return <Image  src={text} style={{width:80,height:60}}/>
          }
        }
      },{
        title: '排序',
        dataIndex: 'sortCode',
        align:'center',
        width:'50px'
      },{
        title: '是否显示',
        dataIndex: 'isShow',
        align:'center',
        width:'60px',
        render:function (text){
          if(text === 0 ){
            return <span style={{backgroundColor:'#dc3545'}}>不显示</span>
          }else{
            return <span style={{backgroundColor:'#3ed68f'}}>显示</span>
          }
        }
      },{
        title: '索引',
        dataIndex: 'firstLetter',
        align:'center',
        width:'50px',
      }
    ]
  }

  //创建钩子函数
  componentDidMount () {
    $http.get("http://localhost/mall-basic-service/basic/brand/queryBasicBrandAll",config).then((response)=>{
      //定义接收对象
      let data = []
      if(response.data.code === 0){
        for(let i = 0 ; i < response.data.data.length;i++){
          data.push(response.data.data[i])
        }
      }
      //数据重组：如果重组数据的还页面无法加载到最新的数组
      this.setState({
        dataSource : data,
        brandData : data
      })
    })
  }

  /**
   * 查询方法
   * @param value
   */
  onSearch = (value) => {
    //获取列表数据
    let brandList = this.state.dataSource;
    //保存原始数据
    let brandData = this.state.brandData;
    //定义一个新的集合用于存放新的数据
    let brandListNew = [];
    if(value.trim() != null && value.trim() !== ""){
      for(let i = 0 ; i < brandList.length ; i ++ ){
        if(brandList[i].brandName.match(value)) {
          brandListNew.push(brandList[i])
        }
      }
    }else{
        brandListNew = brandData
    }
    //重组数据
    this.setState({
      dataSource:brandListNew
    })
  }

  render () {
    return (
      <div className="bodyDiv" style={{width:1150}}>
        <Table
          dataSource={this.state.dataSource}
          columns={this.state.columns}
          scroll={{
            y: 450
          }}
          pagination={{
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/总共 ${total} 条 `,
            showSizeChanger: true,
            defaultPageSize: 100,
            pageSizeOptions: ['10', '20', '30', '50', '100','150','200']
          }}
        />
        {/*搜索框*/}
        <div className="brandSearchDiv">
          <Search
            placeholder="请输入品牌名称"
            onSearch={this.onSearch}
            style={{
              width: 200,
            }}
          />
        </div>
      </div>
    )
  }
}
